<template>
	<view class="container">
		<view class="tabs">
			<view :class="'tab-item' + [activeTab === index ? ' active' : '']" v-for="(item, index) in tabList" :key="index" @click="handleTab(index)">
				<view :class="'iconfont ' +  item.icon"></view>
				<view class="tab-item-name">{{ item.name }}</view>
			</view>
		</view>
		<view class="nav">
			<view class="type-list">
				<view class="type-item" v-for="(item, index) in typeList" :key="index">
					<view class="type-item-left">
						<view :class="'iconfont ' +  item.icon"></view>
						<view class="type-title">{{ item.title }}</view>
					</view>
					<view class="type-item-right">
						<view class="type-val" v-for="(single, i) in item.arr" :key="i" @click="handleType(single)">{{ single }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';	
let tabList = ref<any>([
	{ name: '前端开发', icon: 'icon-wangye' },
	{ name: '后端开发', icon: 'icon-kaifa' },
	{ name: '计算机基础', icon: 'icon-jisuanjishuiping' },
	{ name: '状态管理', icon: 'icon-zhuangtaiguanli' }
])
let activeTab = ref<Number>(0);

let typeList = ref<any>([
	{ title: '编程语言', icon: 'icon-shuju', arr: [ 'CSS', 'HTML', 'javascript', 'typescript' ] },
	{ title: '工程化', icon: 'icon-gongcheng', arr: [ 'WebPack', 'Vite' ] },
	{ title: '手撕', icon: 'icon-daima', arr: [ 'CSS相关', 'js相关' ] },
	{ title: '框架', icon: 'icon-yemiankuangjia_o', arr: [ 'Vue', 'React', 'Augular' ] }
])
/**
 * 1、java基础
2、java集合
3、java并发
4、计算机网络
5、操作系统
6、Mysql
7、Redis
8、Vue
 */
	
const handleTab = (index: Number) => {
	activeTab.value = index;
}

const handleType = (val: string) => {
	uni.navigateTo({
		url: `/index_modules/searchResult/searchResult?current=1&data=${val}`
	})
}

</script>

<style scoped lang="scss">
.tabs {
	padding: 40rpx 20rpx;
	background-color: #625dad;
	display: flex;
	justify-content: space-between;
	.tab-item {
		flex: 1;
		margin: 0 26rpx;
		text-align: center;
		&.active {
			border-bottom: 6rpx solid #fff;
		}
		.iconfont {
			color:#fff;
			font-size: 60rpx;
		}
		.tab-item-name {
			color: #fff;
			padding-bottom: 10rpx;
			font-size: 24rpx;
			margin-top: 30rpx;
		}
	}
}
.type-list {
	padding: 10rpx 20rpx;
	.type-item {
		display: flex;
		padding: 30rpx 10rpx;
		border-bottom: 2rpx solid #ccc;
		.type-item-left {
			width: 130rpx;
			font-size: 24rpx;
			text-align: center;
			margin-right: 10rpx;
			font-size: 28rpx;
			.icon-shuju{
				font-size: 50rpx;
			}
			.icon-daima{
				font-size: 50rpx;
			}
			.icon-gongcheng{
				font-size: 50rpx;
			}
			.icon-yemiankuangjia_o{
				font-size: 50rpx;
			}
			.type-title {
				margin-top: 18rpx;
			}
		}
		.type-item-right {
			flex: 1;
			max-width: calc(100% - 150rpx);
			line-height: 24rpx;
			display: inline-flex;
			justify-content: left;
			align-items: center;
			color: #000;
			font-size: 28rpx;
			.type-val {
				height: 28rpx;
				padding: 0 26rpx;
				border-right: 1rpx solid #000;
				&:last-child {
					border-right: none;
				}
			}
		}
	}
}
</style>
